<template>
  <div class="card content-box">
    <span class="text">积分规则</span>
    <div class="rule-content">
      <div class="view">
        <div class="views" :style="`width:${size.split('*')[0]}px;height:${size.split('*')[1]}px`" v-html="content"></div>
        <el-select v-model="size" placeholder="please select your zone">
          <el-option v-for="(item, index) in sizeList" :key="index" :label="item.name" :value="item.value" />
        </el-select>
      </div>
      <div class="content">
        <WangEditor ref="editRef" v-model:value="content" height="500px" :custom-params="{ prefix: INTEGRAL }" />
        <div class="an-fte">
          <el-button type="primary" @click="cancel"> 取消 </el-button>
          <el-button v-if="isEdit" type="primary" @click="edit"> 编辑 </el-button>
          <el-button v-else type="primary" @click="save"> 保存 </el-button>
          <!-- 
            v-auth="'add'"
            v-auth="'add'"
            v-auth="'add'"
           -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="wangEditor">
import { ref, onMounted } from "vue";
import WangEditor from "@/components/WangEditor/index.vue";
// import { IEditorConfig } from "@wangeditor/editor";
import { getIntegralRule, saveIntegralRule } from "@/api/modules/sys";
import { ElMessage } from "element-plus";
import { INTEGRAL } from "@/constants";

const content = ref("");
let isEdit = ref(true);
const editRef = ref(null);
const size = ref("375*667");
const preContent = ref("");
const cancel = () => {
  content.value = preContent.value;
  editRef.value.editor.disable();
  isEdit.value = true;
};
const edit = () => {
  isEdit.value = false;
  editRef.value.editor.enable();
  editRef.value.editor.focus();
};
const save = async () => {
  try {
    await saveIntegralRule({
      integralRule: content.value
    });
    isEdit.value = true;
    editRef.value.editor.disable();
    ElMessage.success({ message: `保存成功` });
  } catch (e) {
    console.log(e);
  }
};

const sizeList = [
  {
    name: "iPhone 5/SE 320*568",
    value: "320*568"
  },
  {
    name: "iPhone 6/7/8 375*667",
    value: "375*667"
  },
  {
    name: "iPhone 6/7/8 Plus 414*736",
    value: "414*736"
  },
  {
    name: "iPhone 12 Pro 390*844",
    value: "390*844"
  }
];
// 获取积分
const getIntegralRuleHandler = async () => {
  const { data } = await getIntegralRule();
  preContent.value = content.value = data.integralRule;
};

onMounted(async () => {
  await getIntegralRuleHandler();
  editRef.value.editor.disable();
});
// const dialogVisible = ref(false);
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
